让程序员变懒的 “vue-admin-template” 后台管理系统
关注“前端学苑” ，坚持每天进步一点点
「~搭建后台管理系统~」
一、后台管理系统选型
1、集成方案: vue-element-admin
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
github地址：https://github.com/PanJiaChen/vue-element-admin
2、基础模板: vue-admin-template
vue-admin-template 是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
github地址：https://github.com/PanJiaChen/vue-admin-template
说明：
1）vue-element-admin模板当做工具箱或者集成方案仓库，因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。
2）vue-admin-template模板基础上进行二次开发，功能或者组件就去 vue-element-admin 那里复制过来。
vue-element-admin 官网：（重要）
https://panjiachen.gitee.io/vue-element-admin-site/zh/
二、项目实践：
推荐大家选用 vue-admin-template 基础模板开发，同时可以参考vue-element-admin项目的效果，有需要用的组件就直接搬过来用。
项目安装：
# 克隆项目git clone https://github.com/PanJiaChen/vue-admin-template.git# 进入项目目录vue-admin-template# 安装依赖 npm install # 建议不要用 cnpm 安装会有各种诡异的bug，可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 本地开发 启动项目npm run dev浏览模板项目代码
熟悉使用vue脚手架生成项目的结构的话，对admin-template的结构就很清晰了。
src下的目录结构：
├── App.vue //入口├── api // 各种接口├── assets // 图片等资源├── components // 各种公共组件，非公共组件在各自view下维护├── icons //svg icon├── main.js //入口├── permission.js //认证入口├── router // 路由表├── store // 存储├── styles // 各种样式├── utils // 公共工具，非公共工具，在各自view下维护└── views // 各种layout说明：Admin-template虽小，但是还是需要裁剪一些无用的demo。裁剪可以从router着手。
三、爬坑经验
1、启动打开会打开两个页面？
解决方法：
（1）vue.config.js 修改内容：devServer里面改为open: false
（2）package.json 修改内容："dev": "vue-cli-service serve --open"
2、组件英文标识问题
在使用element-ui组件的时候，有些组件是英文的标识，比如分页组件（pagination），设置每一页多少条数的时候，输入框中显示的是英文的page，而不是中文。
处理方法，在main.js中，更改导入的语言包是zh-cn，如下所示：
原来代码：
import locale from 'element-ui/lib/locale/lang/en' // lang i18n修改后的代码：
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n3、面包屑路径显示问题
Breadcrumb文件夹下的index.vue 文件：
原代码，错误状态：
代码如下：
getBreadcrumb() { // only show routes with meta.title const matched = this.$route.matched.filter(item => item.meta && item.meta.title) const first = matched[0] if (!this.isDashboard(first)) { matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched) }
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) },修改后代码，正确状态：
代码如下：
getBreadcrumb() { // only show routes with meta.title const matched = this.$route.matched.filter(item => item.meta && item.meta.title) // const first = matched[0] // if (!this.isDashboard(first)) { // matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched) // } this.levelList = matched // this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) },觉得本文对你有帮助？请分享给更多人
关注「前端学苑」加星标，提升前端技能